<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="user-profile">
        <view class="avatar-container">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
        </view>
        <view class="user-details">
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              {{ name }}
            </view>
            <view class="u_vip" v-if="isVip">
              <text class="vip-tag">VIP</text>
              <text class="vip-date">到期时间：{{ memberTime }}</text>
            </view>
            <view class="u_vip" v-else>
              <text class="vip-tip" @click.stop="handleToCoupons">开通VIP享更多特权 ></text>
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="info-btn" v-if="name">
          <text>个人信息</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>

    <view class="content-section">
      <!-- 未登录提示 -->
      <view class="login-prompt" v-if="!name">
        <view class="prompt-text">登录后可享受更多功能</view>
        <button @click="handleToLogin" class="login-now-btn cu-btn block bg-blue lg round">
          立即登录
        </button>
      </view>

      <!-- VIP卡片套餐 -->
      <view class="user-info-container" v-if="name">
        <view class="member-container">
          <view v-if="!memberTime" class="normal-user">
            <view class="user-status">
              <text class="iconfont icon-user status-icon"></text>
              <text class="user-type">普通用户</text>
            </view>
            <view class="cu-btn round bg-gradient text-white upgrade-btn" @click="handleToCoupons">
              <text class="iconfont icon-vip btn-icon"></text>
              升级Vip会员
            </view>
          </view>
          <view v-else class="vip-user">
            <view class="vip-badge">
              <text class="iconfont icon-vip text-yellow role-icon"></text>
              <text class="vip-label">VIP会员</text>
            </view>
            <text class="expire-text">有效期至: {{ memberTime }}</text>
            
            <!-- 新增：显示下载次数信息 -->
            <view class="download-stats" v-if="downloadInfo">
              <view class="stat-item">
                <text class="stat-label">已下载次数:</text>
                <text class="stat-value">{{ downloadInfo.userCount || 0 }}</text>
              </view>
              <view class="stat-item">
                <text class="stat-label">剩余下载次数:</text>
                <text class="stat-value highlight">
                  {{ (downloadInfo.downloadCount || 0) - (downloadInfo.userCount || 0) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="menu-list">
        <!-- 仅登录后显示的菜单项 -->
        <template v-if="name">
          <view class="list-cell list-cell-arrow" @click="handleToCoupons">
            <view class="menu-item-box">
              <view class="menu-icon-wrapper vip-icon">
                <view class="iconfont icon-vip menu-icon"></view>
              </view>
              <view class="menu-text">会员套餐</view>
            </view>
          </view>
          <view class="list-cell list-cell-arrow" @click="handleToOrder">
            <view class="menu-item-box">
              <view class="menu-icon-wrapper orange-icon">
                <view class="iconfont icon-share menu-icon"></view>
              </view>
              <view class="menu-text">充值订单</view>
            </view>
          </view>
          <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
            <view class="menu-item-box">
              <view class="menu-icon-wrapper blue-icon">
                <view class="iconfont icon-user menu-icon"></view>
              </view>
              <view class="menu-text">编辑资料</view>
            </view>
          </view>
        </template>
        
        <!-- 所有用户都显示的菜单项 -->
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="menu-icon-wrapper red-icon">
              <view class="iconfont icon-aixin menu-icon"></view>
            </view>
            <view class="menu-text">关于我们</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <view class="menu-icon-wrapper green-icon">
              <view class="iconfont icon-setting menu-icon"></view>
            </view>
            <view class="menu-text">应用设置</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { listCoupons } from '@/api/products/coupons'
  import { getDownloadCount } from '@/api/products/download'
  
  export default {
    data() {
      return {
        name: this.$store.state.user.nickName,
        memberTime: this.$store.state.user.memberTime,
        couponsStatus: 1, // 默认关闭
        couponsInfo: '',
        couponsList: [],
        downloadInfo: null // 新增：下载次数信息
      }
    },
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      },
      isVip() {
          // 判断会员到期时间是否大于当前时间
          if (!this.$store.state.user.memberTime) return false
          const now = new Date().getTime()
          const expireTime = new Date(this.$store.state.user.memberTime).getTime()
          return expireTime > now
        }
    },
    created() {
      console.log(this.$store.state.user)
      // 获取套餐信息
      this.getCouponsList()
      
      // 新增：如果是VIP用户，获取下载次数信息
      if (this.isVip && this.$store.state.user.token) {
        this.getDownloadInfo()
      }
    },
    methods: {
      // 获取套餐列表
      getCouponsList() {
        listCoupons().then(res => {
          if (res.code === 200 && res.data) {
            this.couponsList = res.data
            // 获取套餐状态和说明
            if (res.data.length > 0) {
              // 过滤出状态为0的套餐
              const enabledCoupons = res.data.filter(item => item.couponsStatus === 0)
              if (enabledCoupons.length > 0) {
                this.couponsStatus = 0
                this.couponsInfo = enabledCoupons[0].couponsInfo
              }
            }
          }
        }).catch(err => {
          console.error('获取套餐列表失败', err)
        })
      },
      // 新增：获取下载次数信息
      getDownloadInfo() {
        getDownloadCount().then(res => {
          if (res && res.data) {
            this.downloadInfo = res.data
          }
        }).catch(err => {
          console.error('获取下载信息失败', err)
        })
      },
      // 跳转到套餐列表页面
      handleToCoupons() {
        this.$tab.navigateTo('/pages/mine/coupons/index')
      },
      handleToInfo() {
        this.$tab.navigateTo('/pages/mine/info/index')
      },
      handleToOrder() {
        this.$tab.navigateTo('/pages/mine/order/index')
      },
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleJiaoLiuQun() {
        this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f7f8fa;
  }

  .mine-container {
    width: 100%;
    height: 100%;

    .header-section {
      padding: 20px 15px 60px 15px;
      background: linear-gradient(135deg, #4481eb, #04befe);
      color: white;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;

      .user-profile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .avatar-container {
          .cu-avatar {
            width: 80px;
            height: 80px;
            border: 3px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            
            .icon {
              font-size: 40px;
            }
          }
        }
        
        .user-details {
          flex: 1;
          margin-left: 15px;
        }

        .login-tip {
          font-size: 20px;
          font-weight: 600;
          margin-left: 10px;
        }

        .user-info {
          .u_title {
            font-size: 20px;
            font-weight: 600;
            line-height: 30px;
          }
          
          .u_vip {
            margin-top: 5px;
            font-size: 12px;
            line-height: 20px;
            
            .vip-tag {
              background-color: #FFD700;
              color: #ff9500;
              padding: 2px 8px;
              border-radius: 4px;
              font-weight: bold;
              margin-right: 10px;
            }
            
            .vip-date {
              color: rgba(255, 255, 255, 0.9);
            }
            
            .vip-tip {
              color: #FFD700;
              font-weight: bold;
            }
          }
        }
        
        .info-btn {
          display: flex;
          align-items: center;
          background-color: rgba(255, 255, 255, 0.2);
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 14px;
          
          .iconfont {
            margin-left: 4px;
            font-size: 12px;
          }
        }
      }
    }

    .content-section {
      position: relative;
      top: -40px;
      padding: 0 15px;
      
      .login-prompt {
        padding: 20px;
        border-radius: 15px;
        background-color: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
        text-align: center;
        
        .prompt-text {
          font-size: 16px;
          color: #333;
          margin-bottom: 20px;
        }
        
        .login-now-btn {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .user-info-container {
        padding: 20px;
        border-radius: 15px;
        background: linear-gradient(135deg, #ff9500, #DAA520);
        color: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        
        .member-container {
          .normal-user {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .user-status {
              display: flex;
              align-items: center;
              
              .status-icon {
                font-size: 20px;
                margin-right: 8px;
              }
              
              .user-type {
                font-size: 16px;
                font-weight: bold;
              }
            }
            
            .upgrade-btn {
              padding: 8px 16px;
              height: auto;
              font-size: 14px;
              display: flex;
              align-items: center;
              background: linear-gradient(to right, #FFD700, #FFA500);
              border: none;
              box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
              
              .btn-icon {
                margin-right: 5px;
                font-size: 16px;
              }
            }
          }
          
          .vip-user {
            display: flex;
            flex-direction: column;
            
            .vip-badge {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              
              .role-icon {
                font-size: 24px;
                margin-right: 10px;
                color: #FFD700;
              }
              
              .vip-label {
                font-size: 18px;
                font-weight: bold;
                color: #FFD700;
              }
            }
            
            .expire-text {
              font-size: 14px;
              margin-bottom: 10px;
            }
            
            /* 新增：下载次数统计样式 */
            .download-stats {
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
              background-color: rgba(255, 255, 255, 0.1);
              border-radius: 8px;
              padding: 8px 12px;
              
              .stat-item {
                .stat-label {
                  font-size: 12px;
                  opacity: 0.9;
                  margin-right: 5px;
                }
                
                .stat-value {
                  font-size: 14px;
                  font-weight: bold;
                  
                  &.highlight {
                    color: #FFD700;
                  }
                }
              }
            }
          }
        }
      }
      
      .menu-list {
        margin-top: 15px;
        border-radius: 15px;
        background-color: white;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        
        .list-cell {
          padding: 18px 15px;
          border-bottom: 1px solid #f5f6f7;
          
          &:last-child {
            border-bottom: none;
          }
          
          &.list-cell-arrow {
            position: relative;
            
            &:after {
              content: "\e6a3";
              font-family: "iconfont";
              position: absolute;
              right: 15px;
              color: #c0c4cc;
              font-size: 14px;
            }
          }
          
          .menu-item-box {
            display: flex;
            align-items: center;
            
            .menu-icon-wrapper {
              width: 40px;
              height: 40px;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 15px;
              
              &.vip-icon {
                background-color: rgba(255, 215, 0, 0.1);
                color: #FFD700;
              }
              
              &.orange-icon {
                background-color: rgba(255, 165, 0, 0.1);
                color: #FF8C00;
              }
              
              &.blue-icon {
                background-color: rgba(30, 144, 255, 0.1);
                color: #1E90FF;
              }
              
              &.red-icon {
                background-color: rgba(255, 69, 0, 0.1);
                color: #FF6347;
              }
              
              &.green-icon {
                background-color: rgba(46, 204, 113, 0.1);
                color: #2ecc71;
              }
              
              .menu-icon {
                font-size: 22px;
              }
            }
            
            .menu-text {
              font-size: 16px;
              color: #333;
            }
          }
        }
      }
    }
  }
</style>
